<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>失物招领管理</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css" rel="stylesheet">
    <style>
        body {
            overflow-x: hidden;
        }
        #sidebar {
            min-height: 100vh;
            box-shadow: 2px 0 5px rgba(0,0,0,0.1);
            position: fixed;
            left: 0;
            top: 0;
            z-index: 1000;
        }
        .main-content {
            margin-left: 0;
            transition: margin-left 0.3s;
            position: relative;
            z-index: 1;
        }
        @media (min-width: 768px) {
            .main-content {
                margin-left: 25%;
            }
        }
        @media (min-width: 992px) {
            .main-content {
                margin-left: 16.666667%;
            }
        }
    </style>
</head>
<body>
    <div class="container-fluid">
        <div class="row">
            <!-- 侧边导航栏 -->
            <div th:replace="fragments/sidebar :: sidebar"></div>

            <!-- 主内容区域 -->
            <main class="col-md-9 ms-sm-auto col-lg-10 px-md-4 main-content">
                <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
                    <h1 class="h2">失物招领管理</h1>
                    <div class="btn-toolbar mb-2 mb-md-0">
                        <a th:href="@{/lost-item/add}" class="btn btn-sm btn-outline-primary">
                            <i class="bi bi-plus-circle"></i> 新增失物
                        </a>
                    </div>
                </div>

                <!-- 搜索表单 -->
                <div class="card mb-4">
                    <div class="card-body">
                        <form th:action="@{/lost-item/list}" method="get" class="row g-3">
                            <div class="col-md-4">
                                <label for="title" class="form-label">物品名称</label>
                                <input type="text" class="form-control" id="title" name="title" th:value="${title}" placeholder="输入物品名称">
                            </div>
                            <div class="col-md-3">
                                <label for="category" class="form-label">分类</label>
                                <input type="text" class="form-control" id="category" name="category" th:value="${category}" placeholder="输入分类">
                            </div>
                            <div class="col-md-3">
                                <label for="location" class="form-label">丢失地点</label>
                                <input type="text" class="form-control" id="location" name="location" th:value="${location}" placeholder="输入丢失地点">
                            </div>
                            <div class="col-md-2">
                                <label class="form-label">&nbsp;</label>
                                <div>
                                    <button type="submit" class="btn btn-primary">搜索</button>
                                    <a th:href="@{/lost-item/list}" class="btn btn-secondary">重置</a>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>

                <!-- 数据表格 -->
                <div class="card">
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-striped table-hover">
                                <thead>
                                    <tr>
                                        <th>图片</th>
                                        <th>物品名称</th>
                                        <th>分类</th>
                                        <th>丢失地点</th>
                                        <th>状态</th>
                                        <th>创建时间</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr th:each="item : ${page.records}">
                                        <td>
                                            <div th:if="${item.imageUrl != null and item.imageUrl != ''}">
                                                <img th:src="${item.imageUrl}" alt="物品图片" class="img-thumbnail" style="max-height: 50px; max-width: 50px;">
                                            </div>
                                            <div th:unless="${item.imageUrl != null and item.imageUrl != ''}" class="text-muted">
                                                <i class="bi bi-image"></i>
                                            </div>
                                        </td>
                                        <td th:text="${item.title}"></td>
                                        <td th:text="${item.category}"></td>
                                        <td th:text="${item.location}"></td>
                                        <td>
                                            <span th:if="${item.status == 0}" class="badge bg-warning">未认领</span>
                                            <span th:if="${item.status == 1}" class="badge bg-success">已认领</span>
                                        </td>
                                        <td th:text="${#temporals.format(item.submitTime, 'yyyy-MM-dd HH:mm')}"></td>
                                        <td>
                                            <div class="btn-group btn-group-sm">
                                                <a th:href="@{/lost-item/detail/{id}(id=${item.id})}" class="btn btn-info">查看</a>
                                                <a th:href="@{/lost-item/edit/{id}(id=${item.id})}" class="btn btn-primary">编辑</a>
                                                <a th:if="${item.status == 0}" th:href="@{/claim-record/claim/{id}(id=${item.id})}" class="btn btn-success">认领</a>
                                                <a th:href="@{/lost-item/delete/{id}(id=${item.id})}" class="btn btn-danger" onclick="return confirm('确定删除吗？')">删除</a>
                                            </div>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>

                        <!-- 分页 -->
                        <nav aria-label="Page navigation">
                            <ul class="pagination justify-content-center">
                                <li class="page-item" th:classappend="${page.current == 1} ? 'disabled'">
                                    <a class="page-link" th:href="@{/lost-item/list(pageNum=${page.current - 1}, pageSize=${page.size}, title=${title}, category=${category}, location=${location})}">上一页</a>
                                </li>
                                <li th:each="i : ${#numbers.sequence(1, page.pages)}" class="page-item" th:classappend="${i == page.current} ? 'active'">
                                    <a class="page-link" th:href="@{/lost-item/list(pageNum=${i}, pageSize=${page.size}, title=${title}, category=${category}, location=${location})}" th:text="${i}"></a>
                                </li>
                                <li class="page-item" th:classappend="${page.current == page.pages} ? 'disabled'">
                                    <a class="page-link" th:href="@{/lost-item/list(pageNum=${page.current + 1}, pageSize=${page.size}, title=${title}, category=${category}, location=${location})}">下一页</a>
                                </li>
                            </ul>
                        </nav>
                    </div>
                </div>
            </main>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>